/**
 * Created by guiyongdong on 2017/6/20.
 */
import React,{Component} from 'react';
import './Home.css';
import {Link} from 'react-router-dom';
import Utils from '../Utils';
import Banner from '../head/Banner';
import '../example/Example.css';
import ExampleData from '../example/ExampleData';


export default class Home extends Component {

    render() {

        return (
            <div className="Home">

                {/*轮播图*/}
                {this._renderBanner()}

                {/*/!*关于*!/*/}
                {this._renderAbout()}

                {/*/!*服务*!/*/}
                {this._renderServer()}

                {/*/!*案例*!/*/}
                {this._renderExample()}

            </div>
        );
    }
    _renderBanner() {
        return(
            <Banner/>
        )
    }

    _renderAbout() {

        if (!Utils.IsPhone()) {
            return(
                <div className="HomeAbout">
                    <p style={{fontSize:30}}>ABOUT US-关于我们</p>
                    <div style={{width:150,height:3,backgroundColor:"#FF4800",marginTop:10}}/>
                    <p style={{fontSize:30, marginTop:40,marginLeft:10,marginRight:10}}>历经三年，我们成为移动互联网开发领域先行者</p>
                    <p style={{fontSize:16,marginTop:30,fontWeight:200,marginLeft:10,marginRight:10}}>郑州佰胜网络科技有限公司以高度的战略格局和敏锐的商业嗅觉，专注于为客户提供引领行业的移动互联网软件定制开发服务</p>
                    <p style={{fontSize:16,marginTop:20,fontWeight:200,marginLeft:10,marginRight:10}}>涵盖APP开发,软件开发,HTML5开发,微信开发,高端网站建设等专业服务。</p>

                    <Link  to={"about"}>
                        <button className="HomeAboutButton" onClick={()=>{
                            sessionStorage.index = 3;
                        }}>
                            了解更多+
                        </button>
                    </Link>
                </div>
            );
        }else {
            return (
                <div className="HomeAbout">
                    <p style={{fontSize:25}}>ABOUT US-关于我们</p>
                    <div style={{width:150,height:3,backgroundColor:"#FF4800",marginTop:10}}/>
                    <p style={{fontSize:25, marginTop:40,marginLeft:15,marginRight:15}}>历经三年，我们成为移动互联网开发领域先行者</p>
                    <p style={{fontSize:16,marginTop:30,fontWeight:200,marginLeft:15,marginRight:15}}>郑州佰胜网络科技有限公司以高度的战略格局和敏锐的商业嗅觉，专注于为客户提供引领行业的移动互联网软件定制开发服务</p>
                    <p style={{fontSize:16,marginTop:20,fontWeight:200,marginLeft:15,marginRight:15}}>涵盖APP开发,软件开发,HTML5开发,微信开发,高端网站建设等专业服务。</p>

                    <Link  to={"about"}>
                        <button className="HomeAboutButton" onClick={()=>{
                            sessionStorage.index = 3;
                        }}>
                            了解更多+
                        </button>
                    </Link>
                </div>
            );
        }
    }

    _renderServer() {
        let items = [];
        let names = ["APP开发","微信公众号开发","微信小程序开发","网站开发"];
        let srcs = [require('../../image/app.png'),require('../../image/weixinhao.png'),require('../../image/xiaochengxu.png'),require('../../image/h5e.png')];

        if (!Utils.IsPhone()) {
            for (let i = 0; i< 4; i++) {
                items.push(
                    <div className="HomeItem" key={i}>
                        <img src={srcs[i]} style={{width:80, height:80}} alt="home"/>
                        <p style={{fontSize:18,color:"white",marginTop:20}}>{names[i]}</p>
                    </div>
                );
            }
            return(
                <div className="HomeServer">
                    <p style={{fontSize:30, color:"white",marginTop:50}}>OUR SERVICES-我们的服务</p>
                    <div style={{width:150,height:3,backgroundColor:"#FF4800",marginTop:10}}/>
                    <div className="HomeServerView">
                        {items }
                    </div>
                    <Link  to={"server"}>
                        <button className="HomeServerButton" onClick={()=>{
                            sessionStorage.index = 1;
                        }}>
                        了解更多+
                        </button>
                    </Link>
                </div>
            )
        }else  {
            for (let i = 0; i< 4; i++) {
                items.push(
                    <div className="PhoneHomeItem" key={i}>
                        <img src={srcs[i]} style={{width:70, height:70}} alt="home"/>
                        <p style={{fontSize:18,color:"white",marginTop:20}}>{names[i]}</p>
                    </div>
                );
            }
            return(
                <div className="HomeServer">
                    <p style={{fontSize:25, color:"white",marginTop:50}}>OUR SERVICES-我们的服务</p>
                    <div style={{width:150,height:3,backgroundColor:"#FF4800",marginTop:10}}/>
                    <div className="PhoneHomeServerView" >
                        {items }
                    </div>
                    <Link  to={"server"}>
                        <button className="HomeServerButton" onClick={()=>{
                            sessionStorage.index = 1;
                        }}>
                            了解更多+
                        </button>
                    </Link>
                </div>
            )
        }
    }

    _renderExample() {

        let style = {};
        let top = -200;
        if (!Utils.IsPhone()) {
            let w = (document.body.clientWidth-30*4)/3;
            if (w < 300) w = 300;
            let h = w*2/3;
            top = -h;
            style={width:w, height:h};
        }

        let views = [];
        for (let i=0;i<6;i++) {
            let data = ExampleData[i];
            views.push(
                <Link key={i} to={{pathname:'/detail/'+i}} target="bank">
                    <div className="ExampleItemView" style={style} key={i}>
                        <img  src={data.image} className="ExampleImage"/>
                        <div className="ExampleItem" style={{marginTop:top}}>
                            <p style={{color:"white",fontSize:25}}>{data.title}</p>
                            <p style={{color:"white",fontSize:15,marginLeft:10,marginRight:10,marginTop:5}}>{data.message}</p>
                        </div>
                    </div>
                </Link>
            );
        }


        let size = 30;
        if (Utils.IsPhone()) {
            size = 25;
        }

            return(
                <div className="HomeServer" style={{background:"white"}}>
                    <p style={{fontSize:size,marginTop:30,marginLeft:10,marginRight:10}}>CASE WORKS-成功案例</p>
                    <div style={{width:150,height:3,backgroundColor:"#FF4800",marginTop:10}}/>
                    <div className="ExampleView" >
                        {views}
                    </div>
                    <Link  to={"example"}>
                        <button className="HomeAboutButton" style={{marginTop:0}} onClick={()=>{
                            sessionStorage.index = 2;
                        }}>
                            了解更多+
                        </button>
                    </Link>
                </div>
            );



    }
}







